<template id="">
    <div class="cen-table">
        <div class="table-top">{{headerData.shortName}} txid：{{txid}}</div>
        <table class="table-layout" border="1">
            <thead class="layout-head">
                <tr>
                    <th width="25%">Confirmations</th>
                    <th width="50%">Block Hash</th>
                    <th width="25%">Timestamp</th>
                </tr>
            </thead>
            <tbody class="layout-cen ">
                <tr class="input">
                    <td>{{listData.confirmations}}</td>
                    <td><a :class="{'cursor' : !headerData.colorId}" @click="lookBlock(listData.blockHash)">{{listData.blockHash}}</a></td>
                    <td>{{listData.time}}</td>
                </tr>
            </tbody>
        </table>
        <div class="table-details clearfix">
            <div class="details-box details-l">
                <div class="ls-top">
                    <span>Input Addresses</span>
                </div>
                <div class="ls-address clearfix">
                    <span class="addressl">Address</span>
                    <span class="addressr">Amount ({{headerData.shortName}})</span>
                </div>
                <div class="ls-put clearfix" v-for="(item,index) in listData.vinList">
                    <span class="addressl">
                        <a class="cursor" @click="lookAddress(item.address)">{{item.address}}</a>
                    </span>
                    <span class="addressr output">{{item.amount}}</span>
                    <span class="onlydesc" v-if="item.address == null && item.amount == null">{{item.desc}}</span>
                </div>
            </div>
            <div class="details-box details-r">
                <div class="ls-top">
                    <span>Recipients</span>
                </div>
                <div class="ls-address clearfix">
                    <span class="addressl">Address</span>
                    <span class="addressr">Amount ({{headerData.shortName}})</span>
                </div>
                <div class="ls-put clearfix" v-for="(item,index) in listData.voutList">
                    <span class="addressl">
                        <a class="cursor" @click="lookAddress(item.address)">{{item.address}}</a>
                    </span>
                    <span class="addressr input">{{item.amount}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
export default {
    name: 'tx',
    data(){
        return{
            txid:null,
            listData:'',//
        }
    },
    computed: {
        ...mapGetters(['G_SELECT_DATA']),
    },
    mounted(){

    },
    created(){
        this.headerData = this.G_SELECT_DATA;
        this.getTradingInfo();
    },
    methods:{
        // 跳转查看区块
        lookBlock(blockHash){
            if(blockHash && !this.headerData.colorId){
                this.$router.push({name:'block',params:{has:blockHash,type:2}});
            }
        },
        // 跳转产看地址
        lookAddress(address){
            if(address){
                this.$router.push({name:'address',params:{has:address}});
            }
        },
        // 查询交易详情
        getTradingInfo(){
            this.txid = this.$route.params.txid
            // 根据colorId判断是彩色币还是hsr
            let requerstHeader = {
                method  :'get'
            }
            let colorId = this.headerData.colorId;
            if(colorId){
                requerstHeader.url = `explorer/colorcoins/api/v1/tx/${this.txid}`;
            }else{
                requerstHeader.url = `explorer/hsr/api/v1/tx/${this.txid}`;
            }
            this.$http(requerstHeader).then((res)=>{
                let data = res.data;
                if(data.responseCode === 1){
                    this.listData = data.responseData;
                }
            })
        }
    },
    watch:{
        '$route'(to,from){
            this.getTradingInfo();
        }
    }
}
</script>
